<template>
	<view class="body">
		<xk-header title="选房预约"></xk-header>
		<scroll-view scroll-x="true" class="scroll">
			<view :class="lookRoomData.pi_looking_property_dets.length == 1 ? 'scroll-one' : 'scroll-x'">
				<view v-for="(item, index) of lookRoomData.pi_looking_property_dets" :key="index" class="data-item">
					<view class="item-top">
						<view>物业编号: {{ item.property_code }}</view>
						<view style="font-size: 28rpx; color: #2C72FF;"><uni-icons style="margin-right: 20rpx;"
								color="#2C72FF" type="eye"></uni-icons>{{ item.company_look_num || 0}}次</view>
					</view>
					<view class="item-middel">
						<image v-if="item.property_image" mode="aspectFill" class="img"
							:src="item.property_image | formatImgPath('200', '150')" />
						<image v-else mode="aspectFill" class="img" :src="(imgUrl+'/wx/default_img.jpg')" />
						<view class="info">
							<view class="top">
								<view class="name">{{ item.tag_name || "-" }}</view>
								<view class="desc">{{ item.floor_area }}㎡/{{ item.storey }}层/{{ item.building }}楼</view>
								<view class="amount">{{ (item.pricing_amount * item.floor_area || "") | formatMoneyNo00
								}}元/月
								</view>
							</view> 
						</view>
					</view>
					<view class="location-view">
						<image mode="aspectFill" class="dingwei" :src="(imgUrl+'/wx/dingwei.png')" />
						<view class="address">{{ item.storey }}层/{{ item.building }}楼</view>
						<!-- <view class="address">广州市黄埔区伴河路广州莱迪创新科技园西侧步行约140米科信纳米谷产业园</view> -->
					</view>
				</view>
			</view>
		</scroll-view>

		<view class="list">
			<view class="list-item header" @click="more = !more">
				<view>
					<view class="header-icon"></view>申请信息
				</view>
				<image v-if="!more" :src="(imgUrl+'/wx/up.png')"></image>
				<image v-else :src="(imgUrl+'/wx/down.png')"></image>
			</view>
			<view v-if="more">
				<view class="list-item">
					<view>申请人：{{ lookRoomData.apply_user_name }}<text style="color: #2C72FF; margin-left: 40rpx;">(预约{{
						lookRoomData.company_look_num }}次)</text></view>
				</view>
				<view class="list-item">
					<view>联系号码：{{ lookRoomData.contact_phone }}</view>
				</view>
				<view class="list-item">
					<view>单位名称：{{ lookRoomData.company_name }}</view>
				</view>
				<view class="list-item">
					<view>租赁用途：{{ lookRoomData.apply_lease_purpose || '暂无'}}</view>
				</view>
				<view class="list-item">
					<view>查看物业时间段：{{ lookRoomData.start_time }}</view>
					<view></view>
				</view>
				<view class="list-item">
					<view>备注：{{ lookRoomData.accept_remark || '暂无'}}</view>
				</view>
			</view>
		</view>

		<view class="list">
			<view class="list-item header" @click="formMore = !formMore">
				<view>
					<view class="header-icon"></view>预约受理
				</view>
				<image v-if="!formMore" :src="(imgUrl+'/wx/up.png')"></image>
				<image v-else :src="(imgUrl+'/wx/down.png')"></image>
			</view>
			<view v-if="formMore">
				<!-- <view class="list-item">
					<view>接单人：</view>
					<input class="input-item" placeholder="请输入您的姓名" placeholder-class="placeholder"/>
				</view>
				<view class="list-item">
					<view>联系方式：</view>
					<input class="input-item" type="number" placeholder="请输入您的联系方式" placeholder-class="placeholder"/>
				</view>
				<picker :value="dept" @change="deptChange">
					<view class="list-item">
						<view>受理部门：</view>
						<view :class="dept ? 'right-title1' : 'right-title1 right-title1-empty'">{{dept ? dept : "请选择"}}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
					</view>
				</picker> -->
				<!-- <biaofun-datetime-picker :defaultValue="defaultDate"
					start="2000-02-03 00:00"
					end="2200-10-28 23:59"
					fields="minute"
					@change="acceptDateChange"
				>
					<view class="list-item">
						<view>接待日期：</view>
						<view :class="acceptDate ? 'right-title1' : 'right-title1 right-title1-empty'">{{acceptDate ? acceptDate : "请选择"}}</view>
						<image mode="aspectFill" class="jiantou" src="/static/jiantou.png"/>
					</view>
				</biaofun-datetime-picker> -->
				<picker mode="date" :value="acceptDate" @change="acceptDateChange">
					<view class="list-item">
						<view>开始时间<text class="com-req"></text>：</view>
						<view :class="acceptDate ? 'right-title1' : 'right-title1 right-title1-empty'">
							{{ acceptDate ? acceptDate : "请选择" }}</view>
						<image mode="aspectFill" class="jiantou" :src="(imgUrl+'/wx/jiantou.png')" />
					</view>
				</picker>
				<view class="list-item textarea">
					<view>受理意见：</view>
					<textarea v-model="formData.accept_remark" placeholder="在此输入您的受理意见" placeholder-class="placeholder" />
				</view>
			</view>
		</view>
		<view class="common-bottom-view">
			<view class="common-btn btn-plant btn" @click="acceptLookRoom('20')">拒绝受理</view>
			<view class="common-btn btn" @click="acceptLookRoom('10')">同意受理</view>
		</view>
		<view class="common-zw"></view>
	</view>
</template>

<script>
import moment from 'moment'
export default {
	data() {
		return {
			imgUrl:this.$config.BASE_imgUrl,
			defaultDate: moment().format('YYYY-MM-DD HH:mm'),
			lookRoomData: {
				pi_looking_property_dets: []
			},
			more: true,
			formMore: true,
			// dept: '',
			acceptDate: '',
			formData: {
				look_id: '',
				accept_result: '',
				accept_starttime: '',
				accept_remark: '',
				isSubmit: true
			}
		};
	},
	onLoad(options) {
		this.formData.look_id = options.lookId;
		this.getLookRoomData()
	},
	methods: {
		getLookRoomData() {
			this.$api.baseData_getPiLookingRoom(this.formData.look_id).then((res) => {
				this.lookRoomData = res.piLookingRoom
				console.log('lookRoomData',this.lookRoomData)
			})
		},
		acceptDateChange(e) {
			this.acceptDate = moment(e.dt).format('YYYY-MM-DD HH:mm')
		},
		acceptLookRoom(accept_result) {
			let content = ""
			let confirmText = ""
			if (accept_result == '10') {
				if (!this.acceptDate) {
					this.$util.toast('请选择接待日期')
					return
				}
				content = "确认要受理看房申请？"
				confirmText = "同意受理"
			} else {
				if (!this.formData.accept_remark) {
					this.$util.toast('请填写受理备注')
					return
				}
				content = "确认要拒绝受理看房申请？"
				confirmText = "拒绝受理"
			}
			this.$util.confirm({
				content,
				confirmText
			}).then(isConfirm => {
				if (isConfirm) {
					this.formData.accept_result = accept_result;
					this.formData.accept_starttime = this.acceptDate;
					this.$util.post({
						url: "app/piLookingRoom/accept",
						data: this.formData
					}).then((res) => {
						if (res.code == 'UNAUTHORIZED_ACCESS') {
							this.$util.toast(res.message)
						} else {
							uni.redirectTo({
								url: '/pagesA/check-house/check-house-finish?type=accept'
							})
						}
					});
				}
			})

		}
	}
}
</script>

<style lang="scss" scoped>
.scroll {
	.scroll-x {
		display: inline-flex;
		padding-right: 30rpx;
	}

	.scroll-one {
		.data-item {
			width: 650rpx !important;
		}
	}
}

.data-item {
	background-color: #FFFFFF;
	border-radius: 10rpx;
	margin: 20rpx 0rpx 0rpx 30rpx;
	padding: 20rpx;
	color: #333;
	font-size: 28rpx;
	white-space: normal;
	width: 550rpx;

	.item-top {
		display: flex;

		:first-child {
			flex: 1;
		}

		.del-img {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.item-middel {
		display: flex;
		margin-top: 10rpx;

		.img {
			width: 200rpx;
			height: 150rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
		}

		.info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.top {
				.name {
					font-size: 28rpx;
					font-weight: bolder;
					color: #333333;
				}

				.desc {
					font-size: 28rpx;
					color: #999999;
				}

				.amount {
					font-size: 36rpx;
					font-weight: bolder;
					color: #FF3737;
				}
			}
		}
	}

	.location-view {
		display: flex;
		margin-top: 20rpx;
		align-items: flex-start;
		border-top: 1px solid #EEEEEE;
		padding-top: 10rpx;

		.dingwei {
			width: 30rpx;
			height: 30rpx;
			margin-top: 5rpx;
		}

		.address {
			font-size: 24rpx;
			color: #333;
			margin-left: 10rpx;
		}
	}
}

.list {
	margin: 20rpx 30rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;

	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: #333333;
		font-size: 28rpx;
		padding: 30rpx 20rpx;

		>view:first-child {
			color: #333333;
		}

		.input-item {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			margin-left: 20rpx;
		}

		.right-title1 {
			flex: 1;
			text-align: right;
			color: #333;
		}

		.right-title1-empty {
			color: #ccc;
		}

		.jiantou {
			width: 14rpx;
			height: 24rpx;
			margin-left: 10rpx;
		}
	}

	.textarea {
		display: flex;
		flex-direction: column;
		align-items: flex-start;

		textarea {
			margin-top: 20rpx;
			padding: 16rpx 20rpx;
			background-color: #F9F9F9;
			border-radius: 10rpx;
			height: 130rpx;
			font-size: 28rpx;
			color: #333333;
		}
	}

	.list-item2 {
		font-size: 28px;
		color: #333333;
		display: flex;
		align-items: center;
		color: #333333;
		font-size: 28rpx;
		padding: 22rpx 20rpx;

		:first-child {
			width: 150rpx;
		}
	}

	.header {
		font-size: 32rpx;
		font-weight: bolder;
		color: #333333;
		padding: 30rpx 20rpx 30rpx 0;

		>view:first-child {
			flex: 1;
			display: flex;
			align-items: center;
			color: #333333;

			.header-icon {
				height: 40rpx;
				width: 12rpx;
				border-top-right-radius: 6rpx;
				border-bottom-right-radius: 6rpx;
				background-color: #2C72FF;
				margin-right: 10rpx;
			}
		}

		image {
			width: 24rpx;
			height: 24rpx;
		}
	}
}

.btn-view {
	display: flex;
	justify-content: space-around;

	.btn {
		width: 290rpx;
		height: 88rpx;
	}
}
</style>
